<template>
  <div class="app-container">
    <el-row >
      <el-col :span="11">
        <p class="shenqing">
          <span>基础信息</span>
          <el-button type="primary" size="mini" style="float: right" @click="zhuanpai">专派</el-button>

        </p>
        <table border="1" rules="all" class="tablestylexq">
          <tr>
            <td class="nameinput">计划名称</td>
            <td  colspan="3" class="neiinput">
              {{zerenOptions.planName}}
            </td>
          </tr>
          <tr class="xunzhong">
            <td class="nameinput">计划开始时间</td>
            <td class="neiinput">   {{zerenOptions.predictStartTime}}</td>
            <td class="nameinput">计划结束时间</td>
            <td class="neiinput"> {{zerenOptions.predictEndTime}}</td>
          </tr>
          <tr>
            <td class="nameinput">开始执行时间</td>
            <td class="neiinput"> {{zerenOptions.practicalStartTime}}</td>
            <td class="nameinput">结束执行时间</td>
            <td class="neiinput">{{zerenOptions.practicalEndTime}}</td>
          </tr>
          <tr class="xunzhong">
            <td class="nameinput">任务状态</td>
            <td class="neiinput">
              <span v-show="zerenOptions.taskStatus=='1'">未开始</span>
              <span v-show="zerenOptions.taskStatus=='2'">执行中</span>
              <span v-show="zerenOptions.taskStatus=='3'">已完成</span>
              <span v-show="zerenOptions.taskStatus=='4'">已作废</span>
            </td>
            <td class="nameinput">延误天数</td>
            <td class="neiinput">{{zerenOptions.delayDays}}</td>
          </tr>
          <tr>
            <td class="nameinput">异常项个数</td>
            <td class="neiinput">{{zerenOptions.abnormalDeviceNumber}}</td>
            <td class="nameinput">漏检项个数</td>
            <td class="neiinput">{{zerenOptions.lackExamineDeviceNumber}}</td>
          </tr>
          <tr class="xunzhong">
            <td class="nameinput">备注</td>
            <td  colspan="3" style="width: 1030px;padding-left: 10px">
              {{zerenOptions.remark}}
            </td>
          </tr>
        </table>
        <p class="shenqing">责任人</p>
        <el-table
          :data="zerenOptions.devicePollingResponsibilityUserVos"
          border
          stripe
          style="width: 1196px;margin-left: 15px">
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="50">
          </el-table-column>
          <el-table-column  align="center"  prop="nickName" label="姓名" ></el-table-column>
          <el-table-column  align="center"  prop="sex" label="性别">
            <template slot-scope="scope" >
              <span v-show="scope.row.sex=='0'">男</span>
              <span v-show="scope.row.sex=='1'">女</span>
              <span v-show="scope.row.sex=='2'">未知</span>
            </template>
          </el-table-column>
          <el-table-column  align="center"  prop="aptitudes" label="资质证书" :show-overflow-tooltip="true"></el-table-column>
        </el-table>

        <p class="shenqing">巡检路线</p>
        <el-table
          :data="zerenOptions.deviceInspectionTasksPathVos"
          border
          stripe
          style="width: 1196px;margin-left: 15px">
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="50">
          </el-table-column>
          <el-table-column
            prop="deviceName"
            label="设备"
            align="center"
            width="180">
            <template slot-scope="scope" >
             <span style="color: #196fef;cursor:pointer;" @click="shebeiBtn(scope.row.id)">{{scope.row.deviceName}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="isAnomaly"
            label="是否异常"
            align="center"
            width="180">
            <template slot-scope="scope" >
              <span v-show="scope.row.isAnomaly=='1'">是</span>
              <span v-show="scope.row.isAnomaly=='0'">否</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="number"
            label="执行顺序">
          </el-table-column>
          <el-table-column
            align="center"
            prop="inspectionDate"
            label="巡检时间">
          </el-table-column>
          <el-table-column
            align="center"
            prop="inspectionUser"
            label="巡检人">
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="11" style="margin-left: 20px">
        <p class="shenqing">点检信息</p>
        <table border="1" rules="all" class="tablestylexq">
          <tr>
            <td class="nameinput">点检项个数</td>
            <td class="neiinput">
              {{dianjianArr.spotCheckNumber}}
            </td>
          </tr>
          <tr class="xunzhong">
            <td class="nameinput">已检数</td>
            <td class="neiinput">
              {{dianjianArr.inspectedNumber}}
            </td>
          </tr>
          <tr>
            <td class="nameinput">总点检异常数次数</td>
            <td class="neiinput">
              {{dianjianArr.abnormalNumber}}
            </td>
          </tr>
        </table>
        <p class="shenqing">点检结果</p>
        <div v-for="item in dianjianArr.deviceInspectionTasksPathResults">
          <table border="1" rules="all" class="tablestylexq">
            <tr class="xunzhong">
              <td class="nameinput">{{item.projectName}}</td>
              <td class="neiinput inpturight" >
                <span style="color: red">未检</span>
              </td>
            </tr>
            <tr>
              <td class="nameinput">点检值</td>
              <td class="neiinput inpturight">
                {{item.spotCheckValue}}
              </td>
            </tr>
            <tr>
              <td class="nameinput">是否异常</td>
              <td class="neiinput inpturight">
                <span v-show="item.isAnomaly=='0'">否</span>
                <span v-show="item.isAnomaly=='1'">是</span>
              </td>
            </tr>
          </table>
        </div>


      </el-col>
    </el-row>
    <el-dialog
      title="选择责任人"
      :visible.sync="dialogVisible"
      width="800px">
      <el-form :model="queryParams" ref="queryForm" :inline="true" >
        <el-form-item label="姓名" >
          <el-input
            v-model="queryParams.nickName"
            placeholder="请输入计划姓名"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="资质证书" >
          <el-input
            v-model="queryParams.aptitudes"
            placeholder="请输入资质证书"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
        </el-form-item>
      </el-form>
      <p>
        <el-button size="mini" type="success" icon="el-icon-plus" @click="addBtn">添加</el-button>

      </p>
      <el-table
        :data="chuanData"
        stripe
        v-loading="loading"
        style="width: 100%"
        @selection-change="chuanAChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column  align="center" type="index" label="序号"  width="55"  />
        <el-table-column  align="center"  prop="nickName" label="姓名" ></el-table-column>
        <el-table-column  align="center"  prop="sex" label="性别">
          <template slot-scope="scope" >
            <span v-show="scope.row.sex=='0'">男</span>
            <span v-show="scope.row.sex=='1'">女</span>
            <span v-show="scope.row.sex=='2'">未知</span>
          </template>
        </el-table-column>
        <el-table-column  align="center"  prop="aptitudes" label="资质证书" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column  align="center"  prop="unfinishedWorkNumber" label="未完成工单数" ></el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <p>
        <span style="color: #1ab394">选中人员</span>
        <el-button style="margin-left: 30px" size="mini" type="danger" icon="el-icon-delete" @click="delBtn">删除</el-button>
        <el-button size="mini"  type="primary" @click="saveBtn">确 定</el-button>
      </p>
      <el-table
        :data="chuanDataB"
        stripe
        height="300px"
        style="width: 100%"
        @selection-change="chuanAChangeB">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column  align="center" type="index" label="序号"  width="55"  />
        <el-table-column  align="center"  prop="nickName" label="姓名" ></el-table-column>
        <el-table-column  align="center"  prop="sex" label="性别">
          <template slot-scope="scope" >
            <span v-show="scope.row.sex=='0'">男</span>
            <span v-show="scope.row.sex=='1'">女</span>
            <span v-show="scope.row.sex=='2'">未知</span>
          </template>
        </el-table-column>
        <el-table-column  align="center"  prop="aptitudes" label="资质证书" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column  align="center"  prop="unfinishedWorkNumber" label="未完成工单数" ></el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
  import request from '@/utils/request'
  export default {
    name: "Role",

    data() {

      return {
        loading:false,
        total:0,
        zerenOptions:{
          planName:'',
          predictStartTime:'',
          predictEndTime :'',
          practicalStartTime:'',
          practicalEndTime:'',
          taskStatus:'',
          delayDays:'',
          abnormalDeviceNumber:'',
          lackExamineDeviceNumber:'',
          remark:'',
          deviceInspectionTasksPathVos:[],//巡检路线
          devicePollingResponsibilityUserVos:[],//责任人

        },
        //点检数据
        dianjianArr:{
          spotCheckNumber:'',
          inspectedNumber:'',
          abnormalNumber:'',
          deviceInspectionTasksPathResults:[],
        },

        chuanData:[],
        xuanzeArr:[],
        chuanDataB:[],//选中人员
        xuanzeArrB:[],
        queryParams:{
          name:'',
          aptitudes:'',
          responsibilityId:3,
          pageNum: 1,
          pageSize: 10,
        },
        dialogVisible:false,
      };
    },
    created() {
      console.log('接受数据',this.$route.query.data)
      this.getTaskList()
      this.getList()
      debugger



    },
    methods: {
      //删除
      delBtn:function(){
        for (var i=0;i< this.chuanDataB.length;i++){
          for(var j=0;j<this.xuanzeArrB.length;j++){
            if(this.chuanDataB[i].id==this.xuanzeArrB[j].id){//相等
              this.chuanDataB.splice(i,1)
            }
          }
        }
      },
      //添加
      addBtn:function(){
        this.chuanDataB= this.deteleObject( this.chuanDataB.concat(this.xuanzeArr))
      },
      deteleObject:function(data){
        let hash = {};
        const data2 = data.reduce((preVal, curVal) => {
          hash[curVal.id] ? '' : hash[curVal.id] = true && preVal.push(curVal);
          return preVal
        }, [])
        return data2
      },
      /** 查询责任人列表 */
      getList() {
        this.loading = true;
        request({
          url: '/device/implementer/newlist',
          method: 'get',
          params:this.queryParams
        }).then(response => {
          this.loading = false;
          this.chuanData = response.rows
          this.total = response.total
        });
      },
      //查询点检结果
      shebeiBtn:function(id){
        console.log(id)
        request({
          url: '/device/deviceInspectionTasksPathResult/' + id,
          method: 'get',
        }).then(response => {
          this.dianjianArr = response.data
        });
      },
      getTaskList() {
        request({
          url: '/device/deviceInspectionTasks/' + this.$route.query.data.id,
          method: 'get',
        }).then(response => {
          this.zerenOptions = response.data
          if(this.zerenOptions.deviceInspectionTasksPathVos){
            this.shebeiBtn(this.zerenOptions.deviceInspectionTasksPathVos[0].id)
          }
        });
      },

      //穿梭框监听事件
      chuanAChange:function(val){
        console.log('111',val)
        this.xuanzeArr = val
      },
      //选中人员监听
      chuanAChangeB:function(val){
        console.log('选中',val)
        this.xuanzeArrB = val
      },
      //转调
      zhuanpai:function () {
        this.chuanData=[],
        this.xuanzeArr=[],
        this.chuanDataB=[],//选中人员
        this.xuanzeArrB=[],
        this.dialogVisible=true
      },
      //调转确定
      saveBtn:function () {
        var obj = {}
        obj.deviceInspectionTasksResponsibilities = this.chuanDataB
        request({
          url: '/device/deviceInspectionTasksResponsibility/save',
          method: 'post',
          data:obj
        }).then(response => {
          this.$message({
            type: 'success',
            message: '专派成功!'
          });
          this.dialogVisible=false
          this.getTaskList()

        });
      }

    }
  };
</script>
<style>
  .shenqing{
    color: #05A380;
    font-weight: 700;
    margin-left: 15px;
  }
  .tablestylexq {
    margin-left: 15px;
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;
    width: 100%;
  }
  .xunzhong {
    background: #f6f8f9;
  }
  .neiinput {
    padding-left: 10px;
  }
  .nameinput {
    width: 150px;
    height: 34px;
    text-align: center;
  }
  .fujian span{
    margin-left: 15px;
    cursor: pointer;
  }
  .inpturight{
    text-align: right;padding-right: 10px
  }
</style>
